<!--
 * @Description: In User Settings Edit
 * @Author: lf
 * @Date: 2019-08-02 14:30:03
 * @LastEditTime: 2019-08-16 14:04:13
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div id="page-suggestionFeedback">
    <top-header title="意见反馈"></top-header>
    <div class="complaint-suggestion" >
      <div  @click="changeTab(1)">
        <div class="complaint" :class = "tab == 1?'active' :'' ">
          <p>投诉老师</p>
        </div>
      </div>
      <div  @click="changeTab(2)">
        <div class="suggestion" :class = "tab == 2?'active' :'' ">
          <p>建议/意见</p>
        </div>
      </div>
    </div>
    <div class="content">
      <textarea v-model="content"  placeholder="感谢你使用我们的产品，请输入你的反馈意见，你的反馈将帮助我们成长更快..."></textarea>
    </div>
    <div class="tel-input">
      <input v-model = "telephone" class="tel" type="text" placeholder="请输入您的联系方式，便于我们联系您">
    </div>
    <div class="btn-submit" @click="btnSubmit()">
      <p>提交</p>
    </div>
  </div>
</template>

<script>
import topHeader from '@/components/topHeader';
import tool from '@/assets/js/tool'
import { setTimeout } from 'timers';
  export default {
    data() {
      return {
        //当前导航栏 默认为空
        tab: '',
        // 手机号码
        telephone:'',
        // 反馈内容
        content: ''
      }
    },
    components: {
      topHeader
    },
    methods:{
      // 导航栏切换
      changeTab(val){
        this.tab = val
      },
      // 提交建议
      btnSubmit(){
        var that = this
        // toast公共配置
        var toastConfig = {
          type:'text',
          position: 'default',
          time: 1000,
          text:''
        }
        tool.checkPhone(that,that.telephone)
        if(!that.tab){
           toastConfig.text = '请选择反馈类型'
        }else if(!that.content){
          toastConfig.text = '请填写反馈内容'
        }else if(that.content.length>100){
          toastConfig.text = '反馈意见长度不能超过100个字符'
        }else{
          if(tool.checkPhone(that,that.telephone)){
            that.axiosCommit()
            setTimeout(function toMyCenter(){
              that.$router.push('/myCenter')
            },1500)
            return 
          }else{
            return
          }
        }
        that.$vux.toast.show(toastConfig)
      },
      // 提交接口
      axiosCommit(){
        var that = this
        that.$fetch.post('/app/jmyc/user_fb',{
          fbtype: that.tab,
          content: that.content,
          mobile: that.telephone
        }).then(res=>{
          console.log(res)
          //toast公共配置
          var toastConfig = {
            type:'text',
            text:'',
            position:'top',
            time:1000
          }
          if(res.code == 200){
            toastConfig.text = '提交成功，我们将尽快处理'
          }else{
            toastConfig.text = '提交失败，请稍后重试'
          }
          that.$vux.toast.show(toastConfig)
        })
      }
    }
  }
</script>

<style lang="less" >
  @import './index.less';
</style>